<template>
  <div class="confirm">
    <!-- 导航栏  确认订单 -->
    <!-- <van-nav-bar @click-left="$router.back()" left-arrow :title="$route.name"></van-nav-bar> -->

    <!-- ========= 头部 开始 ========== -->
    <header>
       <div class="tou">确定订单</div>
      <div class="header-top">
        <!-- <van-contact-card add-text="点击完善收货地址" @click="$router.push('/address')"></van-contact-card>
      </div> -->
      <!-- <div class="header-bottom"> -->
        <div class="h33">
          <h3>zs 111</h3>
          <div>默认</div>
          <div>学校</div></div><br>

        <p> 辽宁省鞍山市千山区xx1号</p>
      </div>
    </header>

    <!-- ========= 内容 开始 ========= -->
    <main>
      <div class="content">
        <div class="content-top">
          <div class="top-left">
            <span class="iconfont icon-jingxuan">
              <img class="img11" src="../assets/img/home/品质大牌.png" alt="">
            </span>
            <h3>品牌精选</h3>
          </div>
          <div class="top-right">
            <p>已免运费</p>
            <a href>领券</a>wuliyu
          </div>
        </div>
        <div class="content-bottom">
          
          <img src="https://img13.360buyimg.com/n7/jfs/t1/219946/31/37327/95926/6605519cFdc84daa3/4044266375106195.jpg" alt="">
          <div class="img-size">
            <h3>苹果手机</h3>
            <div class="money">
              <p>
                ￥
                <b>99999</b>
              </p>
              <span>X2</span>
            </div>
            <div class="special">
              <a href>7天无理由退货</a>
              <a href>特价</a>
            </div>
          </div>
        </div>
        <div class="firm">
          <div class="lnvoice">
            <p>发票类型</p>
            <span>不开发票 &nbsp; &nbsp;></span>
          </div>
          <div class="lnvoice">
            <p>售后免邮</p>
            <span>部分商家赠送</span>
          </div>
          <div class="lnvoice">
            <p>买家留言</p>
            <span>填写内容需要与商家协商并确认，45字以内</span>
          </div>
        </div>
        <div class="geduan"></div>
        <div class="preferential">
          <div class="lnvoice">
            <p>商品金额</p>
            <span>￥1998</span>
          </div>
          <div class="lnvoice">
            <p>优惠活动</p>
            <span>-￥200</span>
          </div>
          <div class="lnvoice">
            <p>优惠券</p>
            <span>暂无可用</span>
          </div>
        </div>
      </div>
    </main>

    <!-- ========= 固定定位 ========= -->
    <!-- 固定定位 -->
   <van-submit-bar :price="3050" button-text="提交订单" @submit="$router.push(`/zifu`)"  >
  <van-checkbox >全选</van-checkbox>
  <template #tip>
    你的收货地址不支持同城送, <span >修改地址</span>
  </template>
</van-submit-bar>
  </div>
</template>

<script>
// 引入mixin.js文件

export default {

  data() {
    return {
      user: "", //把获取的信息放入user中
      confirm: []
    };
  },
  // 方法
  
};
</script>

<style scoped>
/* ========= 头部 开始 ========= */
.van-nav-bar {
  width: 100%;
  background-image: linear-gradient(
      180deg,
      #fe502d 0%,
      #fb4723 31%,
      #fb5136 71%,
      #ff5849 100%
    ),
    linear-gradient(#fff3f2, #fff3f2);
}
.tou {
  width: 100%;
  background-color: #fb4723;

  height: 46px;
  color: #323233;

  font-size: 24px;

  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
/* ========= 头部 开始 ========= */
header {
  /* display: flex;
    flex-direction: column;
    justify-content: space-around; */
  width: 7.5rem;
  height: 1.6rem;
  position: relative;
  background-image: linear-gradient(
      180deg,
      #ff6040 0%,
      #ff7560 71%,
      #ff8a80 100%
    ),
    linear-gradient(#fff3f2, #fff3f2);
  box-shadow: 0.01rem 0.01rem 0.2rem 0rem #fd7373;
}

/* 分类 */
.header-top {
  width: 80%;
  height: 1.8rem;
  margin-left: 10%;
  display: flex;
  background: white;
  align-items: center;
  border-radius: 0rem 0rem 0.18rem 0.18rem;
}

/* 内容 开始 */
main {
  width: 7.5rem;
  background-color: #f2f2f2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.content {
  width: 7.5rem;
  /* height: 7rem; */
  background-color: #ffffff;
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content-top {
  width: 7.5rem;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content-top .top-left {
  display: flex;
  margin-left: 0.2rem;
}
.content-top .top-left span {
  font-size: 0.32rem;
  color: #ff6040;
  padding-right: 0.2rem;
}
.content-top .top-left h3 {
  font-size: 0.32rem;
  color: #ff6040;
}
.content-top .top-right {
  display: flex;
  margin-right: 0.2rem;
}
.content-top .top-right p {
  font-size: 0.24rem;
  color: #333;
  margin-right: 0.2rem;
  position: relative;
}
.content-top .top-right p::after {
  content: "";
  display: block;
  width: 0.01rem;
  height: 0.24rem;
  background-color: #333;
  position: absolute;
  right: -0.21rem;
  bottom: 0.03rem;
}
.content-top .top-right a {
  font-size: 0.24rem;
  color: #ff6040;
  margin-left: 0.2rem;
}
.content-bottom {
  width: 7.1rem;
  height: 2.18rem;
  background-color: #ffffff;
  padding-bottom: 0.3rem;
  display: flex;
  justify-content: space-between;
}
.content-bottom img {
  width: 2.16rem;
  height: 2.16rem;
}
.content-bottom .img-size {
  width: 4.64rem;
  height: 2.18rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content-bottom .img-size h3 {
  font-size: 0.31rem;
}
.content-bottom .img-size .money {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content-bottom .img-size .money p {
  font-size: 0.2rem;
  color: #ff6040;
}
.content-bottom .img-size .money p b {
  font-size: 0.4rem;
  font-weight: 600;
  color: #ff6040;
}
.content-bottom .img-size .money span {
  font-size: 0.3rem;
  color: black;
}
.content-bottom .special {
  display: flex;
}
.content-bottom .special a {
  display: block;
  font-size: 0.2rem;
  color: #fff;
  padding: 0.09rem 0.1rem;
  background-color: #ff6040;
  margin-right: 0.2rem;
  margin-top: 0.08rem;
}
.lnvoice {
  width: 7.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.18rem;
}
.lnvoice p {
  font-size: 0.3rem;
  font-weight: 600;
}
.lnvoice span {
  font-size: 0.3rem;
  color: #333;
}
.preferential {
  /* width: 715rem; */
  background-color: #ffffff;
}

.firm {
  background: white;
  margin-top: 20px;
}
.h33 h3{
  font-size: 0.4rem;
  margin-top: -0.5rem;
}
/* 固定定位 */
.h33 div{
  width: 0.5rem;
  height:0.3rem;
  float: left;
  background-color: #fb4723;
  margin-left: 3px;
  border-radius: 5rem;
  border-color: #0051ff;
}
.img11{
  width:0.4rem;
  height: 0.4rem;
}
.geduan{
  width: 100%;
  height: 0.2rem;
  background-color: #bfbfbf;
}
</style>